<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 01_元素内容操作：操作元素和元素内容的方式
		 1. html()    无参---功能：获取匹配元素集合中第一个元素
		              有参---功能：获取匹配元素集合中所有的元素并替换
			特点：添加元素+内容
		 2.  val()    无参---功能：针对表单元素：input、select...
		                          获取第一个表单元素的值【value】
			特点：表单元素+内容、下拉列表只能添加存在的value值
		              有参---功能：针对表单元素：input、select...
					              设置表单元素的值，input直接设置
								                  select不能直接设置，设置原有value值
		 3.  text()   无参---获取匹配元素集合种所有元素的文本内容 
		              有参---设置获取匹配元素集合种所有元素的文本内容做替换
			特点：添加内容
		 -->
	</head>
	<body>
		<h1>html()函数的使用</h1>
		<button>html()函数 有参</button>
		<span>Lorem1</span>
		<span>Lorem2</span>
		<!-- ------------------------------------------ -->
		<h1>val()函数的使用</h1>
		<button class="btn1">val()函数无参</button>
		<input type="text" value="文本框真实数据1">
		<input type="text" value="文本框真实数据2" placeholder="文本框提示">
		<!-- html：按钮btn2 select>option*3 
		       jq:点击按钮，显示第一个表单元素的值
		-->
		<br>
		<button class="btn2">val()函数【select】无参</button>
		<button class="btn3">val()函数【select】有参</button>
		<select>
			<option value="rem1">lorem1</option>
			<option value="rem2">lorem2</option>
			<option value="rem3">lorem3</option>
		</select>
		<br>
		<h1>text()函数的使用</h1>
		<button class="btn4">关于【text】无参</button>
		<button class="btn5">关于【text】有参</button>
		<p>lorem4</p>
		<p>lorem5</p>
		<p>lorem6</p>
		<script>
			
			$(".btn4").click(function(){
				var ptext=$('p').text();
				alert("text的无参按钮"+vals)
			});
			
			$(".btn5").click(function(){
				$("p").text("改变效果");
			});
			
			
			
			/* $(".btn3").click(function(){
				//下拉列表 抓取select元素
				//var vals=$('select').val("rem1");
				//抓取打印 select的js对象。默认字符串形式[object Object]
				//抓取select的js对象，调用toString()方法，如果没有重写[object Object]
				  //设置   第一个option的value值
				$('select').val("rem1")
				var vals=$('select').val()
				alert('val()函数针对下拉列表：'+vals)
			}); */
			
			/* $(".btn1").click(function(){
				//变量名不允许使用关键字  js中关键字 for、in遍历数组
			   var inputValue=$("input").val();
			   alert("val()函数针对input元素 无参："+inputValue)
			}); */
			
			 //按钮，点击按钮实现span lorem1 lorem2转化为lorem
		  /*  $("button").click(function(){
			   $("span").html('<marquee>lorem</marquee>')
		   }); */
		   
		   
		   
			/*变量   js变量---jq
			int i=1;  Java写法 强类语言
			var i=数值、元素; JavaScript弱类语言
			*/
		   /* var html=$("span").html();
		   alert("html()函数的无参的值"+html) */
		   
		  
		</script>
	</body>
</html>